<!-- 这个是在资源库上传时脱离出来的上传组件 -->
<template>
  <div class="upload-input">
    <input style="display:none;" type="file" ref="file" name="file" multiple="multiple" @change="fileChange" />
    <div class="upload-notification" style="bottom: 10px;" v-if="total > 0">
      <div class="ti-message"><span class="files-name">上传</span> <span
          class="files-name textnowrap">{{upload.fileName}}</span> <span
          class="files-name">({{complete}}/{{total}})</span> </div>
      <div class="xui-wrapper xui-myPromption-wrapper">
        <div class="xui-mainContain pt10 bg_fff">
          <div class="xui-returnCommission">
            <div class="xui-process">
              <i class="xui-icon-flag" style="left: 100%;"></i>
              <div class="xui-process-static"></div>
              <div class="xui-process-active" :style="'width: '+upload.width+'%;'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    finish: {
      type: Function
    },
    maps: {
      type: Map
    },
    load: {
      type: Function
    }
  },
  data () {
    return {
      // 上传文件后台获取的限制信息
      uploadInfos: {},
      // 上传的第一个文件
      upload: { index: 0, fileName: '', width: 0 },
      // 一共上传几个
      total: 0,
      // 完成几个
      complete: 0,
      // 结果集
      responses: [],
      // 上传的总大小
      totalSize: 0,
      // 文件路径
      directory: null
    }
  },
  watch: {
    complete: {
      handler (newValue) {
        if (this.total === newValue && this.total > 0) {
          let width = 80.00
          let interval = setInterval(() => {
            if (this.upload.width >= 99.99) {
              this.upload.width = 99.99
              clearInterval(interval)
              setTimeout(() => {
                if (this.total === this.responses.length) {
                  this.$message({ message: '上传 ' + this.upload.fileName + ' 成功', type: 'success' })
                }
                this.responses = []
                this.upload.width = 0
                this.total = 0
                this.complete = 0
                this.upload.fileName = ''
                this.$refs['file'].value = ''
                this.totalSize = 0
              }, 500)
              if (this.directory) {
                if (this.maps.get(this.directory)) {
                  const {row, treeNode, resolve} = this.maps.get(this.directory)
                  this.load(row, treeNode, resolve)
                }
              } else {
                this.finish(this.responses)
              }
            }
            this.upload.width = parseFloat(width).toFixed(2)
            width++
          }, 10)
        }
      },
      deep: true
    }
  },
  methods: {
    // 弹窗选取上传文件
    click (uploadInfos, path) {
      if (uploadInfos) {
        this.uploadInfos = uploadInfos
        this.$refs['file'].click()
      }
      if (path) {
        this.directory = path
      } else {
        this.directory = null
      }
    },
    // 文件改变，就是开始验证上传
    fileChange () {
      // 获取 files dom
      let files = this.$refs['file'].files
      // 获取上传的要求条件
      if (!this.uploadInfos) {
        this.$message({ message: '未获取上传配置，无法上传！', type: 'error' })
        this.$refs['file'].value = ''
        return
      }
      // 验证是否能够上传
      let valid = validUpdateFile(this.uploadInfos, files, this)
      if (typeof valid === 'string') {
        this.$message({ message: valid, type: 'error' })
        this.$refs['file'].value = ''
        return
      }
      if (valid === null) {
        this.$refs['file'].value = ''
        return
      }
      // 一共有几个上传
      this.total = files.length
      this.upload.width = 1
      let width = 1
      let interval = setInterval(() => {
        if (this.upload.width >= 80.00) {
          this.upload.width = 79.99
          clearInterval(interval)
        }
        this.upload.width = parseFloat(width).toFixed(2)
        width = width + (80.00 - width) / 20
      }, 50)

      // 验证通过，开始遍历参数
      for (let i = 0; i < 10; i++) {
        if (!files.hasOwnProperty(i)) {
          break
        }

        let file = files[i]
        this.upload.fileName = this.upload.fileName + '  ' + file.name
        // 创建form对象
        let param = new FormData()
        // 通过append向form对象添加数据
        param.append('file', file)
        if (this.directory) {
          param.append('directory', this.directory)
        }
        // 发送
        this.$upload('/virtual-folder/upload', param, {
          begin: () => {
            // 开始时的操作
          },
          complete: (response) => {
            // 完成的操作
            this.complete = this.complete + 1
            if (response && response.id > 0) {
              this.responses.push(response)
            }
          },
          progressEvent: (progressEvent) => {

          }
        })
      }
    }
  }
}
/**
 * 验证上传的图片是否符合要求
 * r
 */
function validUpdateFile (infos, files, vm) {
  if (files.length < 1) {
    return
  }
  if (files.length > 10) {
    return '上传个数不能大于10个'
  }
  let getAllowExtSize = (ext) => {
    for (let i in infos) {
      let info = infos[i]
      for (let j in info.ext) {
        let infoExt = info.ext[j]
        if (infoExt.toLocaleLowerCase() === ext.toLocaleLowerCase()) {
          return info.valid.size
        }
      }
    }
    return false
  }
  for (let i = 0; i < files.length; i++) {
    let file = files[i]
    let name = file['name']
    let ext = name.substring(name.lastIndexOf('.') + 1, name.length)
    let size = file['size']
    let infosSize = getAllowExtSize(ext)
    vm.totalSize = vm.totalSize + size
    if (!infosSize) {
      return name + ' 文件类型不允许上传'
    }
    if (infosSize.value < size) {
      return name + ' 太大，上传资源不能大于' + (infosSize.value / 1024 / 1024) + 'M'
    }
  }
  return true
}
</script>

<style scoped lang="scss">
.upload-notification {
  display: flex;
  flex-flow: column;
  width: 420px;
  padding: 10px 13px 14px 13px;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  position: fixed;
  bottom: 0px;
  right: 0;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s;
  overflow: hidden;
  z-index: 1000;
}
.ti-message {
  text-align: center;
  color: #409eff;
  height: 27px;
  line-height: 27px;
}
.bg_fff {
  background-color: #fff;
}
.xui-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 750px;
  /*height:100vh;*/
  background-color: #efeff4;
}
.xui-myPromption-wrapper {
  .xui-returnCommission .xui-process {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 8px 0 12px;
    width: 100%;
  }

  .xui-process {
    .xui-icon-flag {
      position: absolute;
      top: 10px;
      left: 0;
      width: 12px;
      height: 18px;
      background-size: 11px;
    }

    .xui-process-static {
      width: 100%;
      height: 15px;
      border-radius: 10px;
      -webkit-box-shadow: 0 0 5px rgba(0, 198, 255, 0.6);
      box-shadow: 0 0 5px rgba(0, 198, 255, 0.6);
      background-color: rgba(0, 198, 255, 0.6);
    }

    .xui-process-active {
      position: absolute;
      top: 8px;
      left: 0;
      width: 0;
      height: 14px;
      border: 1px solid #4dafe2;
      border-radius: 10px;
      background-image: linear-gradient(
        60deg,
        transparent 0rem,
        transparent 0.8rem,
        #4dafe2 0.8rem,
        #4dafe2 1.6rem,
        transparent 1.6rem,
        transparent 2.4rem,
        #4dafe2 2.4rem
      );
      background-color: #008cd5;
      background-size: 20px 38px;
      box-shadow: 1px 1px 5px rgba(0, 140, 213, 0.8);
      -webkit-animation: process 800ms infinite linear;
      animation: process 800ms infinite linear;
      text-align: center;
      font-weight: bolder;
      line-height: 14px;
      font-size: 15px;
      color: #fff;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: 10px;
        background-image: linear-gradient(
          to bottom,
          rgba(0, 140, 213, 0.6),
          rgba(0, 140, 213, 0.6) 15%,
          transparent 60%,
          rgba(0, 140, 213, 0.6)
        );
      }
    }
  }
}

/* 动画 */
@-webkit-keyframes process {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}
@keyframes process {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}
.files-name {
  display: inline-block;
  max-width: 316px;
  overflow: hidden;
}
</style>
